<script setup lang="ts">
import { ref } from "vue";
import { useCounterStore } from "@/stores";
//@ts-ignore
import _throttle from "lodash/throttle";
import { RouterLink, RouterView, useRoute } from "vue-router";
const route = useRoute();
// import ScreenRisize from "@/components/common/ScreenRisize.vue";
const ScreenRisize = defineAsyncComponent(
  () => import("@/components/common/ScreenRisize.vue")
);
// import Navigation from '@/components/common/Navigation.vue'
const Navigation = defineAsyncComponent(
  () => import("@/components/common/Navigation.vue")
);

let oldScrollTop = ref(0); //滚动前的距离
let isShow = ref(!route.meta.hiddenNav);
const showNav = ref(false);
const counterStore = useCounterStore();
const handleSrroll = _throttle((e) => {
  counterStore.count = e.target.scrollTop;
  isShow.value = e.target.scrollTop >= 150 ? false : true;

  let curScorllTop = e.target.scrollTop; //滚动后的距离
  let scrollSetp = curScorllTop - oldScrollTop.value;
  oldScrollTop.value = curScorllTop;

  if (scrollSetp < 0) {
    isShow.value = true;
  }
}, 10);
setTimeout(() => {
  showNav.value = true;
}, 50);
</script>

<template>
  <!-- <ScreenRisize> -->
  <div class="scrollWrap" @scroll="handleSrroll($event)">
    <div v-if="showNav" class="header" :class="{ up: !isShow }">
      <Navigation v-if="!route.meta.hiddenNav"></Navigation>
    </div>
    <RouterView />
  </div>
  <!-- </ScreenRisize> -->
</template>
<style lang="scss" scoped>
.scrollWrap {
  height: 100%;
  overflow-y: auto;
  background: transparent;
  .header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: 0.5s;
  }

  .up {
    opacity: 0;
    transform: translateY(-70px);
  }
}
</style>
